<template>
		<el-dialog
		  id="keybord"
		  title="开台"
		  :visible.sync="keyBoardVisible"
		  :close-on-click-modal="false"
		  width="45%"
		  center>
		  <el-row :gutter="20">
			  <el-col :span="12">
				<el-form :model="dataForm" ref="dataForm"  label-width="80px">
					<el-form-item label="用餐人数:">
					  <el-input  @input="inputCheck" v-model="dataForm.eatNumer" placeholder="用餐人数"></el-input>
					</el-form-item>
					<el-form-item label="用餐时间:">
					  <span style="size: 20px">{{dateFormat("YYYY-mm-dd HH:MM",new Date())}}</span>
					</el-form-item>
					<el-form-item label="服务员:">
					  <el-select v-model="dataForm.staffName" placeholder="服务员" style="width: 100%;">
					      <el-option
					        v-for="item in staffList"
					        :key="item.staffId"
					        :label="item.staffName"
					        :value="item.staffName">
					      </el-option>
					    </el-select>
					</el-form-item>
					<el-form-item label="餐台别名:">
					  <el-input v-model="dataForm.deskAnotherName" placeholder="餐台别名"></el-input>
					</el-form-item>
					<el-form-item label="开台备注:">
					  <el-input v-model="dataForm.openDeskRemark" type="textarea"  placeholder="开台备注"></el-input>
					</el-form-item>
				</el-form>
			  </el-col>
			  <el-col :span="12">
			  	<div id="apps">
			  		<div id="calc-boxs">
			  			<span class="btn" @click="getNumber(1)">1</span>
			  			<span class="btn" @click="getNumber(2)">2</span>
			  			<span class="btn" @click="getNumber(3)">3</span>
			  			<span class="btn" @click="getNumber(4)">4</span>
			  			<span class="btn" @click="getNumber(5)">5</span>
			  			<span class="btn" @click="getNumber(6)">6</span>
			  			<span class="btn" @click="getNumber(7)">7</span>
			  			<span class="btn" @click="getNumber(8)">8</span>
			  			<span class="btn" @click="getNumber(9)">9</span>
			  			<span class="btn" @click="getNumber(0)">0</span>
			  			<span class="btn operator" @click="clearNum">清除</span>
			  			<span v-show="dataForm.isUpdate !== 1" class="btn" style="background-color: lightgrey;" @click="getInputNumber(1)">开台</span>
						<span v-show="dataForm.isUpdate !== 1" class="btnAnd" style="background-color: goldenrod;" @click="getInputNumber(2)">开台并点单</span>
						<span v-show="dataForm.isUpdate === 1" class="btnAnd" style="background-color: goldenrod;" @click="getInputNumber(3)">确认</span>
			  		</div>
			  	</div>
			  </el-col>
		  </el-row>
	</el-dialog>
</template>

<script>
import {compareTime, splitStr} from "../../../utils";

export default {
	data() {
		return {
			keyBoardVisible: false,
			numArray:[],
			totalNum:'',
			panNum:'',
			title:'',
			staffList:[],
      timeList:'',
			dataForm:{
				staffName:'',
				deskAnotherName:'',
				eatNumer:'',
				openDeskRemark:'',
				isUpdate:'',
				sign:''
			},
      timeInterval:''

		};
	},

	created() {},

	methods: {
		 dateFormat(fmt, date) {
		 		    let ret;
		 		    const opt = {
		 		        "Y+": date.getFullYear().toString(),        // 年
		 		        "m+": (date.getMonth() + 1).toString(),     // 月
		 		        "d+": date.getDate().toString(),            // 日
		 		        "H+": date.getHours().toString(),           // 时
		 		        "M+": date.getMinutes().toString(),         // 分
		 		        "S+": date.getSeconds().toString()          // 秒
		 		        // 有其他格式化字符需求可以继续添加，必须转化成字符串
		 		    };
		 		    for (let k in opt) {
		 		        ret = new RegExp("(" + k + ")").exec(fmt);
		 		        if (ret) {
		 		            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
		 		        };
		 		    };
		 		    return fmt;
		 		},

		init(param){
			this.keyBoardVisible = true
			this.dataForm = param
			this.$http({
			  url: this.$http.adornUrl('/store/tstorestaff/list'),
			  method: 'get',
			  params: this.$http.adornParams({
			    'page': 1,
			    'limit': 1000,
          'key':''
			  })
			}).then(({data}) => {
			  if (data && data.code === 0) {
			    this.staffList = data.page.list
			  } else {
			    this.staffList = []
			  }
			})
	},
		//确认
		getInputNumber(sign){
			if(this.dataForm.eatNumer === ''){
				this.$message({
					message: '请输入就餐人数',
					type: 'warning',
					duration: 1500
				});
			}
      else if(this.dataForm.eatNumer.length > 2){
        this.$message.info("请输入合理的就餐人数")
      }
			else{
				this.dataForm.sign = sign
				this.$emit("getEatNum",this.dataForm)
				this.keyBoardVisible = false
			}

		},

		inputCheck(){
			if(isNaN(this.dataForm.eatNumer)){
				this.dataForm.eatNumer = ''
			}
		},

		getNumber(num){
				this.panNum += num.toString()
				if(num === 0 && this.panNum.length === 1){
					this.dataForm.eatNumer = ''
					this.panNum = ''
				}
				else{
					this.dataForm.eatNumer += num.toString()
				}
		},
		//清除数据
		clearNum(){
			this.dataForm.eatNumer = ''
			this.panNum = ''
		},
	},


};
</script>

<style>
#apps {
	width: 100%;
	padding: 0px 20px 10px;
	border-radius: 4px;
	margin: 0px auto;
	background: #ffffff;

	box-sizing: border-box;
}

#input-box {
	display: block;
	width: 100%;
	height: 46px;
	margin-bottom: 15px;
	border: 2px solid #ffffff;
	border-radius: 6px;

	padding: 0 5px;
	text-align: right;
	font-size: 20px;
	color: firebrick;
	font-weight: bold;
	letter-spacing: 1px;
}

#calc-boxs {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#calc-boxs .btn {
	font-size:25px;
	width: 30%;
	height: 60%;
	text-align: center;
	line-height: 45px;
	border-radius: 6px;
	cursor: pointer;
	background: 	lightgreen;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 12px;
	box-shadow: 0 2px rgba(0, 0, 0, 0.2);
}

#calc-boxs .btnAnd{
	font-size:25px;
	width: 100%;
	height: 60%;
	text-align: center;
	line-height: 55px;
	border-radius: 6px;
	cursor: pointer;
	background: 	#B0E0E6;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 12px;
	box-shadow: 0 2px rgba(0, 0, 0, 0.2);
}

#apps .btn-double {
	width: 115px;
	background: #ffc690;
	box-shadow: 0 4px #ab7c50;
}

#apps .clear {
	background: gray;
	box-shadow: 0 4px gray;
	color: #fff;
}

#apps .operator {
	background: gray;
	color: white;
}

#apps .operator1 {
	background: #428ec8;
	color: white;
}

#apps .back {
	background: #f1ff98;
	box-shadow: 0 4px #9da858;
}
</style>
